這個章節要來講述 Javascript 的回收機制，也就式記憶體釋放的情況。

假設現在有兩個 function 的執行堆疊如上圖，在 sayHi 的執行堆疊結束後，會釋放掉他所占的記憶體空間

同理，當 doSomthing 的執行堆疊結束後，也會釋放掉他所占的記憶體空間

最後只剩下 全域環境 的記憶體占比

而記憶體釋放的條件在 MDN 的文件上寫到

那麼我們來看一下實例

    // 隨機產生一串很長的字串
    function randomString (length) {

        var result = '',
            characters = 'AZQCFWVEMBRLKMUJMIKPO',
            charactersLength = characters.length;

        for (var i = 0; i < length; i++){

            result += characters.charAt(Math.floor(Math.random()*charactersLength));

        }

        return result;

    }

    // 範例程式碼1
    var demoData = [];

    function getData () {

        for (let i = 0; i < 1000; i++) {

            demoData.push(randomString(5000));

        }

    }

    getData();

    console.log(demoData);

執行之後呢，我們可以到 Console 查看結果

並且可以透過 Memory 的工具，點選 Take heap snapshot 來看看佔用了多少記憶體

可以看到這樣的結果，總共佔用了 6.4MB 。

那麼我們如果把 getData(); 註解掉的話~

console.log就會是空陣列，沒錯。 那記憶體呢?

變成只有 1.6MB。節省了很多的空間喔!

那麼如果換成下面的程式碼執行看看呢?

    function randomString (length) {

        var result = '',
            characters = 'AZQCFWVEMBRLKMUJMIKPO',
            charactersLength = characters.length;

        for (var i = 0; i < length; i++){

            result += characters.charAt(Math.floor(Math.random()*charactersLength));

        }

        return result;

    }
    
    // 範例程式碼2
    function getData () {

        var demoData = [];

        for (let i = 0; i < 1000; i++) {

            demoData.push(randomString(5000));

        }

        console.log(demoData);

    }

可以看到記憶體占比又回到 6.4MB ，這樣的寫法差異在於我們把 demoData 宣告在 getData 的 function 裡面。

這時候，如果把 Console 的暫存清空的話，

會發現記憶體又回到1.6MB，這同時也證明了，chrome中的console.log也會佔記憶體。

以上就是 Javascript 的記憶體存放與釋放的觀念

希望對大家有幫助 汪汪